<template>
  <div class="w-[98%] p-20px">
    <SecondPassPage auth-password="2580">
    <div class="filter-section">
      <div>
        <el-select style="width: 100px" v-model="filter.trusteeshipType" placeholder="托管类型" clearable>
          <el-option v-for="item in getEnumBySn('cycleTypeEnum')" :key="item.value" :label="item.label"
            :value="item.value" />
        </el-select>
      </div>
      <div>
        <el-select style="width: 120px" v-model="filter.orderStatus" placeholder="处理状态" clearable>
          <el-option v-for="item in getEnumBySn('orderStatus')" :key="item.value" :label="item.label"
            :value="item.value" />
        </el-select>
      </div>
      <div>
        <el-select style="width: 120px" v-model="filter.indexId" clearable filterable placeholder="合作编号">
          <el-option v-for="item in agencyList" :key="item.indexId" :label="item.agencyName" :value="item.indexId" />
        </el-select>
      </div>
      <div>
        <el-input style="width: 100px" v-model="filter.indexIdLike" placeholder="合作编号" clearable></el-input>
      </div>
      <div>
        <el-input style="width: 100px" v-model="filter.customName" placeholder="客户姓名" clearable></el-input>
      </div>
      <div>
        <el-select style="width: 80px" v-model="filter.sex" placeholder="性别" clearable>
          <el-option label="男" value="男"></el-option>
          <el-option label="女" value="女"></el-option>
        </el-select>
      </div>
      <div>
        <el-select style="width: 120px" v-model="filter.businessType" clearable filterable placeholder="业务类型">
          <el-option v-for="item in getEnumBySn('businessType')" :key="item.value" :label="item.label"
            :value="item.value" />
        </el-select>
      </div>
      <div>
        <el-date-picker type="datetime" v-model="filter.orderReceiveDateStart" value-format="YYYY-MM-DD HH:mm:ss"
          placeholder="接单日期开始时间" />
      </div>
      <div>
        <el-date-picker style="margin-left: 10px" type="datetime" v-model="filter.orderReceiveDateEnd"
          value-format="YYYY-MM-DD HH:mm:ss" placeholder="接单日期结束时间" />
      </div>

      <div>
        <el-input style="width: 160px" v-model="filter.memo" placeholder="备注" clearable></el-input>
      </div>

      <div style="display: flex;">
        <el-button type="primary" @click="fetchData()">查询</el-button>
      </div>
    </div>
    <el-tabs v-model="activeName" @tab-change="tabClick">
      <el-tab-pane label="欠费日结提醒" name="day"></el-tab-pane>
      <el-tab-pane label="欠费月结提醒" name="month"></el-tab-pane>
    </el-tabs>
    <el-table :data="tableData" style="width: 100%" border stripe @row-dblclick="rowDbClickHandle">
      <el-table-column label="序号" width="60" align="center">
        <template #default="{ $index }">
          {{ $index + 1 }} <!-- 使用 $index 计算序号 -->
        </template>
      </el-table-column>
      <el-table-column v-for="column in columns" :key="column.prop" :prop="column.prop" :label="column.label"
        :width="column.width" :align="column.align" :show-overflow-tooltip="true">
        <template #default="{ row }">
          <div :style="{ backgroundColor: column.prop === 'indexId' ? row.indexIdColor : '' }">
            <div :class="{
            'red-background': column.prop === 'orderStatus' && (row.orderStatus === '暂停(有群)' || row.orderStatus === '已取消'),
            'green-background': column.prop === 'orderStatus' && (row.orderStatus === '已完成'),
            'green-dayao': column.prop === 'orderStatus' && (row.orderStatus === '定期维护'),
          }">
              {{ row[column.prop] }}
            </div>
          </div>
        </template>

      </el-table-column>
    </el-table>

    <el-pagination :current-page="currentPage" :page-size="pageSize" :total="totalItems" @current-change="currentChange"
      background layout="total,prev, pager, next" class="pagination" prev-text="上一页" next-text="下一页"></el-pagination>
    <MemoModal ref="memoModalRef" @ok="fetchData"></MemoModal>
    </SecondPassPage>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import request from '@/config/axios'
import { getEnumBySn } from "@/api/enums";
import MemoModal from "@/views/order/refundOrder/MemoModal.vue";
const filter = ref({
  name: '',
  phone: '',
  gender: '',
  transferPhone: '',
  indexId: '',
  type: 'day',
});

// 监听 filter 对象的变化
watch(filter, (newValue, oldValue) => {
  fetchData();
}, { deep: true }); // 使用 deep 选项以便监听嵌套属性的变化

const memoModalRef = ref();
const tableData = ref([]);
const columns = ref([
  { prop: 'refundMemo', label: '欠费备注', width: '100' },
  { prop: 'reminderTime', label: '欠费提醒时间', width: '200', align: 'center' },
  { prop: 'orderStatus', label: '处理状态', width: '100', align: 'center' },
  { prop: 'indexId', label: '合作编号', width: '100', align: 'center' },
  { prop: 'customName', label: '客户姓名', width: '100', align: 'center' },
  { prop: 'sex', label: '性别', width: '60', align: 'center' },
  { prop: 'businessType', label: '业务类型', width: '100', align: 'center' },

  { prop: 'transferPhoneCode', label: '转接手机号', width: '180', },
  { prop: 'trusteeshipType', label: '托管', width: '60', align: 'center' },

  // { prop: 'platform', label: '处理平台', width: '60' },
  // { prop: 'customerDemand', label: '客户诉求', width: '100' },
  { prop: 'orderReceiveDate', label: '接单日期', width: '170', align: 'center' },
  { prop: 'orderEndDate', label: '结束日期', width: '170', align: 'center' },

  // { prop: 'handleStaffAccount', label: '做单员工账号', width: '110' },
  { prop: 'memo', label: '备注', width: '250', align: 'center' },
  { prop: 'nativePlace', label: '籍贯', width: '100', align: 'center' },

]);

const tableDatass = ref([]);
const agencyList = ref([]);
const totalItems = ref(0);
const currentPage = ref(1);
const pageSize = ref(15);

const initOption = function () {
  request.get({
    url: '/agency/list',
  }).then(res => {
    agencyList.value = res
  })
}


const currentChange = (v) => {
  currentPage.value = v
  fetchData()
}
async function fetchData() {
  try {
    const response = await request.get({
      url: '/order/getReminderTimeList',
      params: { ...filter.value, current: currentPage.value, size: pageSize.value }
    })
    tableData.value = response.records
    totalItems.value = response.total
    currentPage.value = response.current

  } catch (error) {
    throw error;
  } finally {
  }
}

//欠费备注弹框
const rowDbClickHandle = function (row) {
  memoModalRef.value.open(row);
}

const activeName = ref('day')

const tabClick = function (tab,event) {
  console.log('---tab---', tab)
  filter.value.type = tab
}

onMounted(() => {
  filter.value.trusteeshipType = '月'
  initOption();
  fetchData(); //获取列表
})
</script>

<style scoped>
.filter-section {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.filter-section>* {
  margin-right: 10px;
}

.pagination {
  margin-top: 20px;
  float: right;
  font-size: 22px;
}



.form-inline .el-form-item {
  margin-right: 20px;
}

.el-table .purple-background {
  background: rgb(169, 96, 253) !important;
  color: white;
  /* 确保样式优先级 */
}
.el-table .red-background {
  background: #f53506 !important;
  color: white;
  /* 确保样式优先级 */
}
.el-table .green-background {
  background: #36f506 !important;
  color: white;
  /* 确保样式优先级 */
}

.el-table .green-dayao {
  background: #e6a23c !important;
  color: white;
  /* 确保样式优先级 */
}
</style>
